<%@page import="itsm.isperp.framework.core.context.ContextHolder"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = ContextHolder.getWebServerName(request);
%>

<!doctype html>
<html>
<head>
<title>IT服务管理驾驶舱</title>
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="author" content="ISPERP">
<meta name="Copyright" content="ISPERP" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="shortcut icon" href="favicon.ico" />


<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
* {
	padding: 0;
	margin: 0
}

#allScreen, #screen, iframe {
	width: 1840px;
	height: 1080px;
	border: none;
}

iframe {
	width: 1840px;
	margin-right: 20px;
	overflow: hidden;
}

.screenframe {
	position: absolute;
}

#divcountdown {
	position: absolute;
	right: 10px;
	top: 10px;
	color: #fff;
	font-size: 14px;
	z-index: 100
}

#countdown {
	color: yellow;
	font-weight: 700;
	font-size: 22px;
	padding: 5px
}
</style>
</head>
<body style="background: #000;width: 1840px;">
	<div id="divcountdown">
		<label id="countdown">∞</label>秒后切换 <a href="javascript:void()"
			onclick="gotoNextScreen()">下一屏</a> <a href="javascript:void()"
			onclick="lockOrUnlockScreen()" id="btnLock">锁定</a>
	</div>
	<div id="allScreen" style="overflow: hidden;position: relative;">
		<div id="screen" style="position: relative;">
			<div id="main" class="screenframe">
				<iframe src="screen/screen/main" scrolling="no"></iframe>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		//屏幕数
		var totals = 0;
		//屏幕切换倒计时，-1表示不需要进行屏幕切换，0表示切换时间到达，其它时间表示时间正在进行倒计中
		var countdown = -1;
		//shoing表示当前显示屏
		var showing = 0;
		//是否被锁定			
		var locked = false;

		var mainShowSecend = 15;
		var majorShowSecend = 30;

		//更新倒计时
		function updateCountdown() {
			if (!locked) {
				if (countdown == -1) {
				} else if (countdown == 0) {
					//屏幕切换
					changeScreen();
				} else {
					$("#countdown").text(countdown--);
				}
			}
		}

		//获取重要事件的屏幕数据
		function getMajors() {
			if (!locked) {
				$.ajax({
					url : "screen/screen/incidentMajors",
					dataType : "json",
					async : false,
					success : function(data) {
						totals = data.length;
						showing = 1;
						$("#screen").css("margin-left", "0px");
						$(".majorframe").remove();
						if (data && data.length > 0) {
							for (var i = 0; i < data.length; i++) {
								$("#screen").append('<div id="major' + data[i].id + '" style="left:' + (i + 1) * 1543 + 'px" class="screenframe"><iframe  class="majorframe"  scrolling="no"  src="screen/screen/incidentMajor?id=' + data[i].id + '"></iframe></div>');
							}
							countdown = mainShowSecend;//5秒
						} else {
							$("#countdown").text("∞");
							countdown = -1;
						}
					}
				});
			}
		}

		//屏幕切换
		function changeScreen() {

			if (totals == 0) {
				$("#screen").css("margin-left", "0px");
				showing = 0;
				return;
			}
 
			if (totals == (showing - 1)) {
				showing = 0;
			}

			if (showing == 0) {
				countdown = mainShowSecend;
			} else {
				countdown = majorShowSecend;
			}

			$("#screen").stop().animate({
				"margin-left" : "-" + (1840 * showing) + "px"
			}, 2000, "linear", function() {
			});

			showing = showing + 1;

		}

		//进入下一屏
		function gotoNextScreen() {
			changeScreen();
		}

		//锁定或者解锁
		function lockOrUnlockScreen() {

			locked = !locked;
			if (locked) {
				$("#countdown").text("∞");
				$("#btnLock").text("解锁");
			} else {
				if (showing == 0) {
					countdown = mainShowSecend;
				} else {
					countdown = majorShowSecend;
				}
				$("#btnLock").text("解定");
			}
		}

		getMajors();
		//每秒更新倒计时
		window.setInterval(updateCountdown, 1000);
		//半小时更新一次各个屏
		window.setInterval(getMajors, 1800000);
	</script>
</body>